<template>
  <div>
    <top-bar backShow="true" titleShow="true" title="大师主页">
      <div class="setting" slot="r-btn">
        <div></div>
      </div>
    </top-bar>
    <div class="content">
      <info activeIndex="0"></info>
      <div class="master con-bg">
        <div class="info flex">
          <img class="photo" src="http://via.placeholder.com/135x135" alt="">
          <div class="basic flex-1">
            <div class="name gfc-white">名字名字</div>
            <div class="time gfc-grey1">1小时前</div>
          </div>
          <div class="copy-btn gfc-white align-c">马上复制</div>
        </div>
        <div class="trade">
          <div class="flex">
            <div class="flex-1 gfc-orange2 action">买入</div>
            <div class="flex-1 gfc-white align-c">EURTRY</div>
            <div class="flex-1 gfc-white align-r">$50000</div>
          </div>
        </div>
        <div class="handle flex gfc-white align-c">
          <div class="flex-1">
            <div class="praise">25</div>
          </div>
          <div class="flex-1">
            <div class="comment">24</div>
          </div>
        </div>
      </div>
      <div class="master con-bg">
        <div class="info flex">
          <img class="photo" src="http://via.placeholder.com/135x135" alt="">
          <div class="basic flex-1">
            <div class="name gfc-white">名字名字</div>
            <div class="time gfc-grey1">1小时前</div>
          </div>
          <div class="al-copy gfc-orange2 align-c">已复制</div>
        </div>
        <div class="trade">
          <div class="flex sell">
            <div class="flex-1 gfc-green action">卖出</div>
            <div class="flex-1 gfc-white align-c">EURTRY</div>
            <div class="flex-1 gfc-white align-r">$50000</div>
          </div>
        </div>
        <div class="handle flex gfc-white align-c">
          <div class="flex-1">
            <div class="praise">25</div>
          </div>
          <div class="flex-1">
            <div class="comment">24</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import topBar from '../../components/topBar/topBar.vue'
  import info from '../../components/masterInfo/masterInfo.vue'
  export default {
    data() {
      return {}
    },
    components: {
      topBar,
      info
    },
    methods: {}
  }
</script>

<style scoped>
  .top-bar .setting {
    position: absolute;
    top: 0;
    right: .07rem;
    width: .44rem;
    height: .44rem;
  }

  .top-bar .setting > div {
    width: .22rem;
    height: .22rem;
    margin: .11rem auto;
    background: url("../../assets/setting.png") no-repeat 0/100% 100%;
  }

  .content > div {
    margin-bottom: .1rem;
  }

  .master .info {
    padding: .2rem .18rem 0;
    height: .65rem;
    font-size: .16rem;
  }

  .info .photo {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    margin-right: .18rem;
  }

  .basic .name {
    margin-bottom: .13rem;
  }

  .info .copy-btn, .info .al-copy {
    width: .8rem;
    height: .3rem;
    line-height: .3rem;
    border-radius: .04rem;
    background: #F25E44;
    margin: .08rem 0 0 .18rem;
  }

  .info .al-copy {
    background: none;
    line-height: .28rem;
    border: 1px solid #F25E44;
  }

  .master .trade {
    border-bottom: 1px solid #333a42;
    padding: .2rem .18rem .4rem;
  }

  .trade .flex {
    height: .49rem;
    background: rgba(255, 83, 63, 0.08);
    border: 1px solid rgba(255, 83, 63, 0.30);
    border-radius: .04rem;
    font-size: .16rem;
  }

  .trade .flex > div {
    line-height: .47rem;
  }

  .trade .flex.sell {
    background: rgba(3, 211, 150, 0.08);
    border: 1px solid rgba(3, 211, 150, 0.30);
  }

  .trade .action {
    padding-left: .18rem;
  }

  .trade .align-r {
    padding-right: .18rem;
  }

  .handle {
    height: .62rem;
    font-size: .16rem;
  }

  .handle .flex-1 > div {
    display: inline-block;
    height: .22rem;
    line-height: .22rem;
    margin-top: .2rem;
    padding-left: .3rem;
  }

  .praise {
    background: url("../../assets/praise2.png") no-repeat 0/.22rem 100%;
  }

  .comment {
    background: url("../../assets/comment.png") no-repeat 0/.22rem 100%;
  }
</style>
